<template>
	<view class="announce">
		<view class="item">
			<view class="tit"><text class="xin">*</text>通告名称</view>
			<input class="inp" type="text" placeholder="填写通告名称" />
		</view>
		<view class="item">
			<view class="tit"><text class="xin">*</text>平台类型</view>
			<view class="item-info u-flex u-flex-wrap u-m-t-20">
				<view :class="[item.id==id?'li action':'li']" v-for="(item,index) in typeList" :key="index">{{item.name}}</view>
			</view>
		</view>
		<view class="item">
			<view class="tit"><text class="xin">*</text>通告类型</view>
			<view class="item-info u-flex u-flex-wrap u-m-t-20">
				<view :class="[item.id==id?'li action':'li']" v-for="(item,index) in taskList" :key="index">{{item.name}}</view>
			</view>
		</view>
		<view class="item">
			<view class="tit"><text class="xin">*</text>品牌名称</view>
			<input class="inp" type="text" placeholder="填写品牌名称" />
		</view>
		<view class="item">
			<view class="tit"><text class="xin">*</text>投放方式</view>
			<view class="item-info u-flex u-flex-wrap u-m-t-20">
				<view :class="[item.id==id?'li action':'li']" v-for="(item,index) in taskList" :key="index">{{item.name}}</view>
			</view>
		</view>
		<view class="item">
			<view class="tit"><text class="xin">*</text>封面图</view>
			<u-upload :action="action" :file-list="fileList" ></u-upload>
		</view>
		<view class="item">
			<view class="tit"><text class="xin">*</text>达人领域</view>
			<view class="item-info u-flex u-flex-wrap u-m-t-20">
				<view :class="[item.id==id?'li action':'li']" v-for="(item,index) in taskList" :key="index">{{item.name}}</view>
			</view>
		</view>
		<view class="item">
			<view class="tit"><text class="xin">*</text>粉丝要求</view>
			<view class="item-info u-flex u-flex-wrap u-m-t-20">
				<view :class="[item.id==id?'li action':'li']" v-for="(item,index) in taskList" :key="index">{{item.name}}</view>
			</view>
		</view>
		<view class="item">
			<view class="tit"><text class="xin">*</text>可报名人数</view>
			<input class="inp" type="text" placeholder="填写可报名人数" />
		</view>
		<view class="item-con">
			<view class="u-flex u-row-between item-box">
				<view class="tit"><text class="xin">*</text>报名时间</view>
				<view class="u-flex u-row-between item-text">
					<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
						<view class="uni-input">{{time}}</view>
					</picker>
					<u-icon name="arrow-right" color="#dadada" size="28"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-between item-box">
				<view class="tit"><text class="xin">*</text>任务周期</view>
				<view class="u-flex u-row-between item-text">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
					<u-icon name="arrow-right" color="#dadada" size="28"></u-icon>
				</view>
			</view>
			<view class="u-flex u-row-between  item-box">
				<view class="tit"><text class="xin">*</text>区域要求</view>
				<view class="u-flex u-row-between item-text"><AddressPicker @change="change" class="u-font-lg" :level="3">{{planLocate}}</AddressPicker><u-icon name="arrow-right" color="#dadada" size="28"></u-icon></view>
			</view>
			<view class="u-flex u-row-between item-box" @click="recruit()">
				<view class="tit"><text class="xin">*</text>招募说明</view>
				<view class="u-flex u-row-between"><input type="text" class="u-text-right inp" placeholder="请完善招募说明内容" /><u-icon name="arrow-right" color="#dadada" size="28"></u-icon></view>
			</view>
		</view>
		
		<view class="item">
			<view class="tit"><text class="xin">*</text>联系方式</view>
			<input class="inp" type="text" placeholder="填写可供达人联系的手机号" />
		</view>
		<view class="item">
			<view class="tit"><text class="xin">*</text>微信群二维码</view>
			<u-upload :action="action" :file-list="fileList" ></u-upload>
		</view>
		<view class="releaseBtn" @click="send">发布通告</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			 const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				time: '12:01',
				planLocate:'选择区域',
				action: 'http://www.example.com/upload',
				fileList: [
					{
						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
					}
				],
				id:0,
				typeList:[
					{
						id:1,
						name:'抖音'
					},
					{
						id:2,
						name:'小红书'
					},
					{
						id:3,
						name:'快手'
					},
					{
						id:4,
						name:'哔哩哔哩'
					},
					{
						id:5,
						name:'新浪微博'
					}
				],
				taskList:[
					{
						id:1,
						name:'图文种草'
					},
					{
						id:2,
						name:'达人带货'
					},
					{
						id:3,
						name:'直播带货'
					}
				]
			}
		},
		computed: {
		        startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			recruit(){
				uni.navigateTo({
					url: '/pages/mine/releaseShop/recruit',
				})
			},
			send(){
				uni.navigateTo({
					url: '/pages/mine/releaseShop/releaseDes',
				})
			},
			 bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		},onLoad(e) {
			let that = this;
			that.id = e.id;
			
		}
	}
</script>

<style lang="scss" scoped>
.announce{
	background-color: #fff;
	padding: 30rpx 30rpx 120rpx;
	.item{ 
		margin-bottom: 30rpx;
		.tit{
			font-size: 32rpx;
			color: #000;
			height: 60rpx;
			line-height: 60rpx;
			.xin{ color:#de4f38;}
		}
		.inp{
			border-bottom: 1px solid #eee;
			height: 80rpx;
			font-size: 32rpx;
			padding-left: 20rpx;
		}
		&-info{
			.li{
				text-align: center;
				width: 22%;
				background-color: #f5f5f5;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 60rpx;
				margin-bottom: 30rpx;
				color: #666;
				margin-right: 4%;
				&:nth-child(4n){
					margin-right: 0;
				}
				&.action{
					background-color: #de4f38;
					color: #fff;
				}
			}
		}
	}
	.item-con{
		.item-box{
			height: 80rpx;
			.tit{
				font-size: 32rpx;
				color: #000;
				height: 60rpx;
				line-height: 60rpx;
				.xin{ color:#de4f38;}
			}
			.inp{				font-size: 32rpx;			}
			.item-text{ color:#666;}
		}
	}
	.releaseBtn{position: fixed; bottom: 0; left:0; z-index: 999; text-align: center; font-size: 32rpx; color:#fff; width: 100%; height:100rpx; line-height: 100rpx; background-color: #de4f38; }
}
</style>
